<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #baoguo {
      margin-left: 50px;
      margin-top: 50px;
    }
    #mask {
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
      background-color: skyblue;
      opacity: 0.3;
    }
  </style>
</head>
<body>
  <div id="baoguo">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox"><br>
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox"><br>
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox"><br>
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox"><br>
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox"><br>
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox">
    <input class="Item" type="checkbox"><br>
  </div>

  <div id="mask"></div>


  <div></div>

  <script>
    // flag用于决定是否触发mousemove事件
    let flag = false;
    let items = document.getElementsByClassName('Item');
    let mask = document.getElementById('mask');
    // 鼠标按下时的坐标
    let startX = 0;
    let startY = 0;
    // 鼠标移动过程中到达的坐标
    let endX = 0;
    let endY = 0;



    window.onmousedown = function(e) {
      // 设置mousemove事件开启
      flag = true;
      // 记录鼠标按下的坐标
      startX = e.x;
      startY = e.y;
    } 
    
    window.onmousemove = function(e) {
      e.preventDefault();
      let minX = 0;
      let minY = 0;
      let maxX = 0;
      let maxY = 0;
      if (flag) {
        // 分别拿到遮罩层左右侧x坐标，上下侧y坐标
        minX = Math.min(e.x, startX);
        minY = Math.min(e.y, startY);
        maxX = Math.max(e.x, startX);
        maxY = Math.max(e.y, startY);

        // 遍历所有的checkbox
        for(let i=0; i<items.length; i++) {
          // 如果在遮罩层内，设置为选中（复选框左侧大于遮罩层左部，复选框右侧小于遮罩层右部，复选框上侧大于遮罩层上部，复选框下侧小于遮罩层下部）
          if ((items[i].offsetLeft >= minX && items[i].offsetLeft+items[i].offsetWidth <= maxX) && (items[i].offsetTop >= minY && items[i].offsetTop+items[i].offsetHeight <= maxY)) {
            items[i].checked = true;
          } else { // 否则，设置不选中
            items[i].checked = false;
          }

          // 设置遮罩层宽度长度，，以及相对于body的绝对定位位置
          mask.style.width = (maxX - minX) + 'px';
          mask.style.height = (maxY - minY) + 'px';
          mask.style.left = minX + 'px';
          mask.style.top = minY + 'px';
          // 设置遮罩层可见
          mask.style.visibility = "visible";
        }
        
      }
    }

    window.onmouseup = function(e) {
      // 关闭mousemove事件触发
      flag = false;
      // 隐藏遮罩层
      mask.style.visibility = "hidden";
    }
  </script>
</body>
</html>

